<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jQuery实现自定义滚动条</title>
	<link rel="stylesheet" type="text/css" href="resource/css/reset.css">
	<link rel="stylesheet/less" type="text/css" href="resource/less/style.less" >
</head>
<body>
	<!-- 示例容器 -->
	<div class="scroll-demo">
		<!-- 标签切换区 -->
		<ul class="scroll-tab">
			<li class="tab-item tab-active">第一篇</li>
			<li class="tab-item">第二篇</li>
			<li class="tab-item">第三篇</li>
			<li class="tab-item">第四篇</li>
		</ul>
		<!-- 滚动内容区 -->
		<div class="scroll-wrap clearfix">
			<!-- 滚动内容区 -->
			<div class="scroll-cont">
				<h3 class="anchor">春天来了</h3>
				<div class="scroll-ol">
					<p>春天来了，草长莺飞，万物复苏，到处充满勃勃生机。</</p>
					<p>
						春天来了，春风给新钻出地面的小草披上了绿衣。春天来了，春精灵给了桃树妹妹一个深情的吻，桃树妹妹羞红了脸儿。春天来了，柳树发芽了，那芽儿欢快地生长着，嫩嫩的、绿绿的，风微微地吹着，小芽儿随着柳枝在风中摇晃，就像一个个跳动的音符，正演奏着春天的赞歌。
					</p>
					<p>
						春天来了，阳光明媚。冻冰了的小河在阳光照耀下懒洋洋地舒展着身子，慢悠悠地哼着小曲，舒坦极了。河里的小鱼自由自在地嬉戏着，不时嘴里还冒出几个泡泡，甭提多开心。小鸭子欢快地在水面上游动，不时呼朋引伴结队而行，甭提多快活。在这暖暖的春日里，小孩子们在田野里、小河边、草地上唱着歌儿，采着野花，享受着美好的春光。
					</p>
					<p>
						春天来了，青蛙“呱呱”地叫着，忙着在田里捉害虫；蜜蜂“嗡嗡”地叫着，忙着在在花丛中采花酿蜜；燕子“唧唧”地叫着，忙着在屋檐下搭窝筑巢；布谷鸟“布谷，布谷”地叫着，忙着催促人们春耕播种……“沙沙沙”春雨滋润着大地，让大地焕然一新。“轰轰隆隆”春雷响彻云霄，敲响了迎春交响曲中的大鼓。
					</p>
					<p>春光竟是那么的浪漫，那么的饱满。它把一冬天蕴藏的精神、力量都尽情地释放出来。</p>
					<p>春天来了，草长莺飞，万物复苏，到处充满勃勃生机。</p>
				</div>
				<h3 class="anchor">夏天来了</h3>
				<div class="scroll-ol">
					<p>
						夏天来了，草木也长得特别茂盛，枝繁叶茂的大树为人们撑起了一片浓浓的绿荫。狗躲在阴凉处，伸出长长的舌头，大口地喘着粗气。鱼儿也急忙露出了水面，吐着气泡。池塘里面开满了荷花，它们在池塘里竞相开放，飘出一股淡淡的清香。
					</p>
					<p>夏天来了，池塘里的小鱼儿在快乐地嬉戏，小青蛙端坐在荷叶上大声地歌唱。</p>
					<p>
						夏天来了，大地怕热了，纷纷戴上绿色的帽子。小孩子是可爱的鱼，光着身子在清凉的世界里，游来游去。树枝是害羞的少女，扯片翠绿的裙子，打扮自己。小伙子们的笑语惊醒了星星，悄悄派出萤火虫探个究竟。老汉在庭院中闲扯，把蒲扇扇得月光悠长悠长……
					</p>
					<p>
						夏天来了，大树下面的小花都开了，五彩斑斓真美啊！在大路旁边，大树长得非常的繁茂，宽大的树叶像孩子们的手在微风中欢快的拍打着。
					</p>
				</div>
				<h3 class="anchor">秋天来了</h3>
				<div class="scroll-ol">
					<p>秋天来了，漫长的夏天过去了，我又迎来了一个新学期，秋天是个金色的季节，也是我最喜欢的季节。</p>
					<p>
						秋天来了，小动物也忙碌了起来。蚂蚁从夏天就开始储存粮食，小松鼠在地上捡拾掉落的松果，小蜜蜂把早已储存好的蜂蜜装满了一个个蜂窝，小燕子飞向南方，等冬天过后再回来。还有一些冬眠动物，如乌龟、蛇、刺猬、青蛙也已经准备好了过冬的食物。
					</p>
					<p>
						秋天来了，树叶被调皮的秋风一片片涂黄，把绿叶变成了红叶，再摘下来悄悄珍藏。秋风把小草、小花涂黄，就在这时，菊花、桂花竞相开放了，把香味吹到千里之外，让人们享受这醉人的花香。
					</p>
					<p>秋天来了，原来的炎热一下子销声匿迹了，刚关上空调，秋天就真的来了。</p>
					<p>秋天来了，我把秋天美美地藏进博客里……</p>
					<p>又一个秋天来到了，时间过得真快啊！早晨上街，我穿上了长袖T恤，却仍觉得冷冷的。夏天，真的要走了吗？</p>
					<p>
						秋天来了，路上的行人似乎一下子多了起来。杏色匆匆地赶路。我突然想起唐代诗人张籍的一首诗：“洛阳城里见秋风，欲作家书意万重。复恐匆匆说不尽，行人临发又开封。”秋天，的确是思乡的季节，身在异乡的游子，见到这凄凉的秋景，又怎能不生思乡
					</p>
				</div>
				<h3 class="anchor">冬天来了</h3>
				<div class="scroll-ol">
					<p>
						十月的金秋已悄然离去，而寒冷的冬天却悄悄来临了。你瞧！我们家门前的那棵梧桐树，春天还非常茂盛，密密麻麻的绿叶遮住了阳光，可一到冬天，它那美丽的“绿发”已脱落了，没过多久，就变成了一棵“光头树”。还有那些小草，变得枯黄，路边的小花都谢了，远远望去，仿佛一片无边无际的大沙漠，田里的谷子已经干得不成样子了。走在路上，寒冷的冬风呼呼地刮着我的脸，好似无数把无形刀，插进我的脸，我直打哆嗦，不禁叫起来：“冬天真冷啊！”
					</p>
				</div>
			</div>
			<!-- 滚动条 -->
			<div class="scroll-bar">
				<!-- 滚动滑块 -->
				<div class="scroll-slider"></div>
			</div>
		</div>
	</div>
</body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="./lib/js/app.js"></script>
<script src="./lib/js/less.js"></script>


</html>